<template>
  <ContentPanel :showTopBorder="true">
    <div class="search-form">
      <el-input
        clearable
        placeholder="输入群组ID或群组名称搜索"
        v-model="searchKey"
        size="large"
        @keydown.enter="search"
        @clear="search"
      ></el-input>
      <div class="search-btn iconfont icon-sousuo" @click="search"></div>
    </div>
    <div v-for="item in searchResult" class="search-result-panel">
      <div class="search-result">
        <UserBaseInfo :userInfo="item" :showArea="false"></UserBaseInfo>
        <div class="btn" v-if="item.contactId != userInfoStore.getInfo().userId">
          <el-button
            type="primary"
            v-if="item.status == 1"
            @click="sendMessage(item.contactId)"
            >发消息</el-button
          >
          <el-button type="primary" v-else @click="applyContact(item)">
            {{ "添加群组" }}
          </el-button>
        </div>
      </div>
    </div>
  </ContentPanel>
  <SearchAdd ref="searchAddRef" @reload="resetFrom" />
</template>

<script setup>
import SearchAdd from "./SearchAdd.vue";
import { ref, getCurrentInstance } from "vue";
import { useUserInfoStore } from "@/stores/UserInfoStore";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const userInfoStore = useUserInfoStore();
const router = useRouter();

const searchKey = ref("");
const searchResult = ref([]);
const search = async () => {
  const params = {
    searchKey: searchKey.value,
  };
  const res = await proxy.Api.searchGroup(params);
  if (res.code !== 200) {
    proxy.$message.error(res.message);
    return;
  } else {
    searchResult.value = res.data;
  }
};

const resetFrom = () => {
  searchResult.value = {};
  contactId.value = undefined;
};
const searchAddRef = ref();
const applyContact = (item) => {
  searchAddRef.value.show(item);
};

const sendMessage = (contactId) => {
  router.push({
    path: "/chat",
    query: { contactId: contactId },
  });
};
</script>

<style lang="scss" scoped>
.search-form {
  padding-top: 10px;
  display: flex;
  align-items: center;

  :deep(.el-input__wrapper) {
    border-radius: 4px 0px 0px 4px;
    border-right: none;
  }

  .search-btn {
    background: #409eff;
    color: #fff;
    line-height: 40px;
    width: 80px;
    text-align: center;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
  }
}

.search-result-panel {
  .search-result {
    display: flex;
    justify-content: space-between;
    padding: 20px 10px 0px 10px;
    background: #fff;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;

    .btn {
      margin-top: 10px;
    }
  }

  .op-btn {
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    text-align: center;
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>
